<template>
  <div class="path-bar">
    <el-radio-group
      v-model="deviceType"
      @change="getDeviceTypeData"
      class="radio-group-content"
    >
      <el-radio-button
        :label="item.name"
        v-for="item in deviceTypeList"
        :value="item.id"
        :key="item.id"
      />
    </el-radio-group>
    <el-transfer
      class="transfer-content"
      filterable
      v-model="selectValue.data"
      :filter-method="filterMethod"
      :props="{ key: 'id', label: 'name' }"
      @change="redchange"
      :data="table.data"
      :titles="['可选项', '已选项']"
    />
    <div class="footer">
      <div></div>
      <div class="search-btn">
        <el-button class="reset-btn" @click="resetForm()">取 消 </el-button>
        <el-button class="confirm-btn" @click="submitForm()">确 认 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, defineProps } from "vue";
import { getRoadList } from "@/service/modules/publicModule";
const emits = defineEmits(["operationDone"]);

const props = defineProps({
  leftChecks: Array,
});

const deviceType = ref(1);
const deviceTypeList = ref([
  {
    id: 1,
    name: "路段",
  },
  {
    id: 2,
    name: "停车场",
  },
]);

const getDeviceTypeData = (val) => {
  console.log("val ===>", val);
  deviceType.value = val;
  getData();
};

const selectValue = reactive({
  data: [],
});
const rightValues = ref();
const table = reactive({
  data: [],
});
console.log(props.leftChecks, ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.");
selectValue.data = props.leftChecks;
const getData = async () => {
  table.data = [];
  if (deviceType.value === 1) {
    await getRoadList("3").then((res) => {
      table.data = res.data.result;
    });
  }
};

getData();

const filterMethod = (query, item) => {
  return item.name.toLowerCase().includes(query.toLowerCase());
};

const resetForm = () => {
  emits("operationDone");
};
const redchange = (val) => {
  rightValues.value = val;
  console.log(val, selectValue.data, rightValues.value);
};
const submitForm = () => {
  console.log("selectValue.data ===>", selectValue.data);
  let row = {
    selectValue: selectValue.data,
    index: props.operationId,
  };
  emits("operationDone", row);
};
</script>

<style lang="less" scoped>
.path-bar {
  text-align: center;
}
.radio-group-content {
  margin-top: 24px;
}

.transfer-content {
  margin-top: 36px;
}

.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.search-btn {
  display: flex;
}

.reset-btn {
  width: 65px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.confirm-btn {
  width: 65px;
  height: 32px;
  background: #007aff;
  border-radius: 2px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
</style>
